<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="600px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
      <el-form-item label="客户编码" prop="customerCode" >
        <el-input v-model="form.customerCode" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="客户分类" prop="classificationId" >
       <el-select v-model="form.classificationId" placeholder="客户分类" v-on:change="indexSelect($event)" >
           <el-option v-for="(item,index) in customerItem" :key="index" :label="item.label" :value="item.id">
           </el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="行业分类" prop="industryId">
       <el-select v-model="form.industryId" placeholder="行业分类" v-on:change="indexSelect($event)">
           <el-option v-for="(item,index) in industryItem" :key="index" :label="item.label" :value="item.id">
           </el-option>
      </el-select>
      </el-form-item>
      <!-- <el-form-item label="客户分类id" >
        <el-input v-model="form.classificationId" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="客户分类名称" >
        <el-input v-model="form.classificationItemName" style="width: 370px;"/>
      </el-form-item> -->
      <!-- <el-form-item label="行业分类id" >
        <el-input v-model="form.industryId" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="行业分类名称" >
        <el-input v-model="form.industryItemName" style="width: 370px;"/>
      </el-form-item> -->
      <el-form-item label="客户简称" prop="customerAbbrev">
        <el-input v-model="form.customerAbbrev" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="客户全称" prop="customerName">
        <el-input v-model="form.customerName" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="邮政编码" >
        <el-input v-model="form.postalCode" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="form.contact" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="form.email" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone" style="width: 370px;"/>
      </el-form-item>


       <el-form-item label="单位性质" prop="companyItemId">
       <el-select v-model="form.companyItemId" placeholder="单位性质" v-on:change="indexSelect($event)">
           <el-option v-for="(item,index) in comItem" :key="index" :label="item.label" :value="item.id">
           </el-option>
      </el-select>
      </el-form-item>
      <!-- <el-form-item label="单位性质*id" >
        <el-input v-model="form.companyItemId" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="单位性质*名称" >
        <el-input v-model="form.companyItemName" style="width: 370px;"/>
      </el-form-item> -->
      <el-form-item label="注册资金（万元）" >
        <el-input v-model="form.registeredCapital" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="法定代表人" >
        <el-input v-model="form.head" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="所属地区" prop="area">
        <el-input v-model="form.area" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="纬度" >
        <el-input v-model="form.latitude" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="经度" >
        <el-input v-model="form.longtitude" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="服务等级" prop="serviceContent">
        <el-input v-model="form.serviceContent" style="width: 370px;"/>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio v-for="item in dicts" :key="item.id" v-model="form.state" :label="item.id">{{ item.name }}</el-radio>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" v-show="isView===true" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import { add, edit } from '@/api/tCustomerInfo'
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    isView: {
      type: Boolean,
      required: true
    },
    sup_this: {
      type: Object,
      default: null
    }
  },
  data() {
     const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!this.isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    const validEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入邮箱地址"));
      } else if (!this.isvalidEmail(value)) {
        callback(new Error("请输入正确的邮箱地址"));
      } else {
        callback();
      }
    };
    return {
      loading: false, dialog: false,
      form: {
        id: '',
        customerCode: '',
        classificationId: '',
        classificationItemName: '',
        industryId: '',
        industryItemName: '',
        customerAbbrev: '',
        customerName: '',
        postalCode: '',
        address: '',
        contact: '',
        email: '',
        phone: '',
        companyItemId: '',
        companyItemName: '',
        registeredCapital: '',
        head: '',
        area: '',
        latitude: '',
        longtitude: '',
        serviceContent: '',
        state: 1
      },
     dicts:[
        {
            id:1,
            name:'有效'
        },
        {
            id:2,
            name:'无效'
        }
        ],
      customerItem:[],
      comItem:[],
      industryItem:[],
      rules: {
             classificationId: [
          { required: true, message: "请选择客户分类", trigger: "blur" }
        ],
        customerCode: [
          { required: true, message: "请输入客户编码", trigger: "blur" }
        ],
           industryId: [
          { required: true, message: "请选择行业分类", trigger: "blur" }
        ],
        customerAbbrev: [
          { required: true, message: "请输入客户简称", trigger: "blur" }
        ],
        customerName: [
          { required: true, message: "请输入客户全称", trigger: "blur" }
        ],

         address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        contact: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        email: [{ required: true, validator: validEmail, trigger: "blur" }],
        phone: [{ required: true, validator: validPhone, trigger: "blur" }],
        companyItemId: [
          { required: true, message: "请选择单位性质", trigger: "blur" }
        ],
      
       
        area: [
          { required: true, message: "请选择所属区域", trigger: "blur" }
        ],
        serviceContent: [
          { required: true, message: "请输入服务等级", trigger: "blur" }
        ],
        state: [
          { required: true, message: "请选择状态", trigger: "blur" }
        ]
      }
    }
  },
  mounted:function(){
     this.byNameinfo("客户类型",this.customerItem);
     this.byNameCominfo("单位性质",this.comItem);
     this.byNameIndustryIinfo("行业类型",this.industryItem);
  },
  methods: {
    
    isvalidEmail(str) {
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      return reg.test(str);
    },

    isvalidPhone(str) {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
      return reg.test(str);
    },
     byNameIndustryIinfo(name,industryItem) {
      this.byName(name).then(res => {
        this.bydictId(res.id).then(resobject => {
           this.industryItem=resobject;
        //根据id再进行全部查询
      })
        //根据id再进行全部查询
      })
    },
     byNameCominfo(name,comItem) {
      this.byName(name).then(res => {
        this.bydictId(res.id).then(resobject => {
           this.comItem=resobject;
        //根据id再进行全部查询
      })
        //根据id再进行全部查询
      })
    },
      byNameinfo(name,customerItem) {
      this.byName(name).then(res => {
        this.bydictId(res.id).then(resobject => {
           this.customerItem=resobject;
        //根据id再进行全部查询
      })
        //根据id再进行全部查询
      })
    },
     byNameCominfo(name,comItem) {
      this.byName(name).then(res => {
        this.bydictId(res.id).then(resobject => {
           this.comItem=resobject;
        //根据id再进行全部查询
      })
        //根据id再进行全部查询
      })
    },
        // 获取id值
    byName(name) {
      return request({
        url: 'api/dict/byName/' + name,
        method: 'get'
      })
    },
        // 获取id值
    bydictId(id) {
      return request({
        url: 'api/dictDetail/findByDeptId/' + id,
        method: 'get'
      })
    },
    //----------------------
    indexSelect(event){

    },
    cancel() {
      this.resetForm()
    },
      doSubmit() {
      
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.isAdd) {
            this.doAdd();
          } else this.doEdit();
        } else {
          return false;
        }
      });
    },
    doAdd() {
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.sup_this.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        customerCode: '',
        classificationId: '',
        classificationItemName: '',
        industryId: '',
        industryItemName: '',
        customerAbbrev: '',
        customerName: '',
        postalCode: '',
        address: '',
        contact: '',
        email: '',
        phone: '',
        companyItemId: '',
        companyItemName: '',
        registeredCapital: '',
        head: '',
        area: '',
        latitude: '',
        longtitude: '',
        serviceContent: '',
        state: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
